<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.list{
			width: 550px;
			margin: 20px auto;
		}
		.list li + li span{
			background: #ccc;
			float: left;
			width: 200px;
			height: 50px;
			line-height: 50px;
		}
		.list .caozuo, .list .del{
			width: 100px;
			background: orange;
			text-align: center;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li>
			歌手 <input type="" name="" id='singer'>
			歌曲 <input type="" name="" id="song">
			<button>添加</button>
		</li>
		<li>
			<span>歌手</span>
			<span>歌手</span>
			<span class="caozuo">操作</span>
		</li>
		<li>
			<span>许嵩</span>
			<span>断桥残雪</span>
			<span class="del">删除</span>
		</li>
		<li>
			<span>歌手</span>
			<span>如约而至</span>
			<span class="del">删除</span>
		</li>
	</ul>
	<script type="text/javascript">
		//写逻辑
		// 首先获取他爹：
		let list=document.querySelector('.list')
		// console.log(list,'list节点')
		//获取歌手,歌曲，按钮
		let singer = document.querySelector('#singer')
		let song = document.querySelector('#song')
		let btn = document.querySelector('button')
		// 获取删除
		let del = document.querySelectorAll('.del')
		// 添加逻辑
		btn.onclick = function(){
			// 判断是否为空
			if(singer.value == '' || song.value == ''){
				alert('不能为空')
			}else{
				let lis = document.createElement('li')
			let span1 = document.createElement('span')
			let span2 = document.createElement('span')
			let span3 = document.createElement('span')
			// 赋值以及删除按钮 +类名
			span1.innerText = singer.value
			span2.innerText = song.value
			span3.innerText = '删除'
			span3.className = 'del'
			// 把span标签放到li标签里边
			lis.appendChild(span1)
			lis.appendChild(span2)
			lis.appendChild(span3)
			// 把li标签给ul
			list.appendChild(lis)

			// 给新增得span3添加点击事件--删除
			span3.onclick = function(){
				this.parentNode.remove()
			}

			// 数据清零
			singer.value = ''
			song.value = ''
			}
			

			
		}
        // 删除
		for(let i = 0; i<del.length; i++){
			del[i].onclick = function(){
				// console.log(this) //this指的是事件得绑定者---点击的元素
				this.parentNode.remove()
			}
		} 

	</script>
</body>
</html>